<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Following Curve - Babylon.js</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
<canvas id="renderCanvas"></canvas>
<script>
    // 获取画布和引擎
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    // 创建场景
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);

        // 创建相机
        var camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 20, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // 创建光源
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.7;

        // 创建车（用一个立方体代替）
        var car = BABYLON.MeshBuilder.CreateBox("car", { size: 1 }, scene);

        car.position = new BABYLON.Vector3(0, 0, 0);

        // 定义更曲折的曲线
        var points = [
            new BABYLON.Vector3(0, 0, 0),
            new BABYLON.Vector3(0, 0, 6),
            new BABYLON.Vector3(2, 3, 2),
            new BABYLON.Vector3(5, -2, 8),
            new BABYLON.Vector3(8, 4, 3),
            new BABYLON.Vector3(12, -3, 8),
            new BABYLON.Vector3(15, 2, 9),
            new BABYLON.Vector3(2, 6, 5),
            new BABYLON.Vector3(4, 3, 1),
            new BABYLON.Vector3(8, 6, 7),
            new BABYLON.Vector3(0, 0, 0)


        ];
        var curve = BABYLON.Curve3.CreateCatmullRomSpline(points, 100);

        // 创建白色材质
        var whiteMaterial = new BABYLON.StandardMaterial("whiteMaterial", scene);
        whiteMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);

        // 创建曲线网格并应用白色材质
        var curveMesh = BABYLON.MeshBuilder.CreateLines("curve", { points: curve.getPoints() }, scene);
        curveMesh.material = whiteMaterial;

        // 获取曲线点和切线
        var curvePoints = curve.getPoints();
        var tangents = [];
        for (var i = 0; i < curvePoints.length - 1; i++) {
            var tangent = curvePoints[i + 1].subtract(curvePoints[i]).normalize();
            tangents.push(tangent);
        }

        // 手动更新车的位置和方向
        var currentIndex = 0;


        console.log(curvePoints.length,tangents[0])
        scene.registerBeforeRender(function () {
            if (currentIndex < curvePoints.length - 1) {
                // 更新车的位置
                car.position = curvePoints[currentIndex];



                // 计算车的方向
                var tangent = tangents[currentIndex];
                var forward = tangent;

                var right = BABYLON.Vector3.Cross(BABYLON.Vector3.Up(), forward).normalize();
                var up = BABYLON.Vector3.Cross(forward, right).normalize();

                // 设置车的旋转
                var rotationMatrix = BABYLON.Matrix.Identity();
                rotationMatrix.setRow(0, right);
                rotationMatrix.setRow(1, BABYLON.Vector3.Up());
                rotationMatrix.setRow(2, forward);

                car.rotationQuaternion = BABYLON.Quaternion.FromRotationMatrix(rotationMatrix);

                // 移动到下一个点
                currentIndex++;
            }else {
                currentIndex=0
            }


        });

        return scene;
    };

    // 创建场景并渲染
    var scene = createScene();
    engine.runRenderLoop(function () {
        scene.render();
    });

    // 窗口大小变化时调整引擎
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>

</html>